
<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="author" content="admui.com">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止搜索引擎抓取 -->
    <meta name="robots" content="nofollow">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" type="image/png" href="../../../../public/images/favicon.png">
    <!-- Safari浏览器添加到主屏幕（IOS） -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">
    <link rel="icon" sizes="192x192" href="../../../../public/images/apple-touch-icon.png">
    
    <!-- Win8标题栏及ICON图标 -->
    <meta name="msapplication-TileColor" content="#62a8ea">
    <meta name="msapplication-TileImage" content="../../../../public/images/app-icon72x72@2x.png">
    <link rel="apple-touch-icon-precomposed" href="../../../../public/images/apple-touch-icon.png">
    
    <!--[if lte IE 9]>
    <meta http-equiv="refresh" content="0; url='http://www.admui.com/ie'"/>
    <![endif]-->
    
    <title>导航条 - UI示例 - Admui</title>
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../../../public/themes/global/css/bootstrap.css">
    
    <!-- 字体图标 CSS -->
    <link rel="stylesheet" href="../../../../public/fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="../../../../public/fonts/web-icons/web-icons.css">
    
    <!-- Site CSS -->
    <link rel="stylesheet" href="../../../../public/themes/base/css/site.css" id="admui-siteStyle">
    
    <!-- 插件 CSS -->
    <link rel="stylesheet" href="../../../../public/vendor/animsition/animsition.css">
    <link rel="stylesheet" href="../../../../public/vendor/toastr/toastr.css">
    <link rel="stylesheet" href="../../../../public/vendor/mCustomScrollbar/jquery.mCustomScrollbar.css">
    
    <!-- Page CSS -->
    
    <link rel="stylesheet" href="../../../../public/css/examples/components/structure/navbars.css">
    
    <!-- 插件 -->
    <script src="../../../../public/vendor/jquery/jquery.min.js"></script>
    <script src="../../../../public/vendor/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="../../../../public/vendor/lodash/lodash.min.js"></script>
    <script src="../../../../public/vendor/breakpoints/breakpoints.min.js"></script>
    
    <!--[if lt IE 10]>
    <script src="../../../../public/vendor/media-match/media.match.min.js"></script>
    <script src="../../../../public/vendor/respond/respond.min.js"></script>
    <![endif]-->
    
    <!-- 核心 -->
    <script src="../../../../public/themes/global/js/core.js"></script>
    <script src="../../../../public/themes/global/js/configs/site-configs.js"></script>
    <script src="../../../../public/themes/global/js/components.js"></script>
    <script src="../../../../public/themes/base/js/site.js"></script>
    
    <script>
        'use strict';
        Breakpoints();
    </script></head>
<body class="site-menubar-unfold " data-theme="base">

<nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-inverse" id="admui-siteNavbar" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggler hamburger hamburger-close navbar-toggler-left hided" data-toggle="menubar">
            <span class="sr-only">切换菜单</span>
            <span class="hamburger-bar"></span>
        </button>
        <button type="button" class="navbar-toggler collapsed" data-target="#admui-navbarCollapse" data-toggle="collapse">
            <i class="icon wb-more-horizontal" aria-hidden="true"></i>
        </button>
        <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
            <img class="navbar-brand-logo d-sm-block d-lg-block d-none navbar-logo" src="../../../../public/images/logo-white.svg"
                title="Admui">
            <img class="navbar-brand-logo d-sm-none navbar-logo-mini" src="../../../../public/images/logo-white-min.svg" title="Admui">
        </div>
    </div>

    <div class="navbar-container container-fluid">
        <div class="collapse navbar-collapse navbar-collapse-toolbar" id="admui-navbarCollapse">
            <ul class="nav navbar-toolbar navbar-left">
                <li class="nav-item hidden-float" id="toggleMenubar">
                    <a class="nav-link" data-toggle="menubar" href="javascript:;" role="button" id="admui-toggleMenubar">
                        <i class="icon hamburger hamburger-arrow-left">
                            <span class="sr-only">切换目录</span>
                            <span class="hamburger-bar"></span>
                        </i>
                    </a>
                </li>
                <li class="navbar-menu nav-tabs-horizontal nav-tabs-animate is-load" id="admui-navMenu">
                    <ul class="nav navbar-toolbar nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#admui-navTabsItem-2" aria-controls="admui-navTabsItem-2"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-library"></i>
                                <span>UI 示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-3" aria-controls="admui-navTabsItem-3"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-desktop"></i>
                                <span>页面示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-4" aria-controls="admui-navTabsItem-4"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-table"></i>
                                <span>表格示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-5" aria-controls="admui-navTabsItem-5"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-order"></i>
                                <span>表单示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-6" aria-controls="admui-navTabsItem-6"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-pie-chart"></i>
                                <span>统计图表</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-7" aria-controls="admui-navTabsItem-7"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-menu"></i>
                                <span>菜单示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-8" aria-controls="admui-navTabsItem-8"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-settings"></i>
                                <span>系统管理</span>
                            </a>
                        </li>
                        <li class="nav-item dropdown" id="admui-navbarSubMenu">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;"
                                data-animation="slide-bottom">
                                更多
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item no-menu" href="/html/site-map.html">
                                    <i class="icon wb-list-numbered"></i>
                                    <span>网站地图</span>
                                </a>
                                <a class="dropdown-item no-menu" href="/html/system/menu.html">
                                    <i class="icon wb-wrench"></i>
                                    <span>菜单管理</span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                <li class="nav-item dropdown" id="admui-navbarUser">
                    <a class="nav-link navbar-avatar" data-toggle="dropdown" href="javascript:;" aria-expanded="false"
                        data-animation="scale-up" role="button">
                        <span class="avatar avatar-online">
                            <img src="../../../../public/images/avatar.svg" alt="...">
                            <i></i>
                        </span>
                    </a>
                    <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="/html/system/account.html?tab=display" role="menuitem">
                            <i class="icon wb-layout" aria-hidden="true"></i>
                            <span>显示设置</span>
                        </a>
                        <a class="dropdown-item" href="/html/system/account.html?tab=password" role="menuitem">
                            <i class="icon wb-pencil" aria-hidden="true"></i>
                            <span>修改密码</span>
                        </a>
                        <a class="dropdown-item" href="/html/system/account.html" role="menuitem">
                            <i class="icon wb-settings" aria-hidden="true"></i>
                            <span>账户信息</span>
                        </a>
                        <div class="dropdown-divider" role="presentation"></div>
                        <a class="dropdown-item" href="/html/login.html" role="menuitem">
                            <i class="icon wb-power"></i>
                            <span>退出</span>
                        </a>
                    </div>
                </li>
                <li class="nav-item dropdown" id="admui-navbarMessage">
                    <a class="nav-link msg-btn" data-toggle="dropdown" href="javascript:;" aria-expanded="false"
                        data-animation="scale-up" role="button">
                        <i class="icon wb-bell" aria-hidden="true"></i>
                        <span class="badge badge-danger up msg-num"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>最新消息</h5>
                            <span class="badge badge-round label-danger"></span>
                        </li>
                        <li class="list-group" role="presentation">
                            <div class="navbar-message-content h-250" data-plugin="mCustomScrollbar">
                                <div id="admui-messageContent"></div>
                            </div>
                            <script type="text/html" id="admui-messageTpl">
                                <% if (msgList.length < 1) { %>
                                <p class="text-center h-200 vertical-align">
                                    <small class="vertical-align-middle opacity-four">没有新消息</small>
                                </p>
                                <% } else { %>
                                <% for(var i = 0; i < msgList.length; i++){ %>
                                <% var item = msgList[i]; %>
                                <a class="list-group-item" href="#" data-message-id="<%= item.messageId %>"
                                   data-title="<%= item.title %>"
                                   data-content="<%= item.content %>" role="menuitem">
                                    <div class="media">
                                        <div class="pr-10">
                                            <i class="icon <%= $imports.iconType(item.messageId) %> white icon-circle"
                                               aria-hidden="true"></i>
                                        </div>
                                        <div class="media-body">
                                            <h6 class="media-heading"><%= item.title %></h6>
                                            <time class="media-meta" datetime="<%= item.sendTime %>">
                                                <%= $imports.timeMsg(item.sendTime) %>
                                            </time>
                                        </div>
                                    </div>
                                </a>
                                <% } %>
                                <% } %>
                            </script>
                        </li>
                        <div class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-item" href="/html/system/account.html?tab=message" role="menuitem">
                                <i class="icon fa-navicon"></i>所有消息
                            </a>
                        </div>
                    </ul>
                </li>
                <li class="nav-item d-none d-sm-block" id="admui-navbarDisplay" data-toggle="tooltip" data-placement="bottom"
                    title="设置主题与布局等">
                    <a class="nav-link" href="/html/system/settings/display.html">
                        <i class="icon wb-layout"></i>
                        <span class="sr-only">主题与布局</span>
                    </a>
                </li>
                <li class="nav-item d-none d-sm-block" id="admui-navbarFullscreen" data-toggle="tooltip" data-placement="bottom"
                    title="全屏">
                    <a class="nav-link" href="javascript:;" role="button">
                        <i class="icon icon-fullscreen"></i>
                        <span class="sr-only">全屏</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<nav class="site-menubar" id="admui-siteMenubar">
    <div class="site-menubar-body">
        <div class="tab-content h-full" id="admui-navTabs">
            <div class="tab-pane animation-fade h-full active" id="admui-navTabsItem-2" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">UI 示例</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-laptop" aria-hidden="true"></i>
                            <span class="site-menu-title">布局</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">栅格</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/grids.html">
                                            <span class="site-menu-title">基本栅格</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/layout-grid.html">
                                            <span class="site-menu-title">布局栅格</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">标题栏</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/headers.html">
                                            <span class="site-menu-title">普通</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/bordered-header.html">
                                            <span class="site-menu-title">带边框</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">侧边栏</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/left-static.html">
                                            <span class="site-menu-title">左侧普通</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/left-fixed.html">
                                            <span class="site-menu-title">左侧浮动</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/right-static.html">
                                            <span class="site-menu-title">右侧普通</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/left-fixed.html">
                                            <span class="site-menu-title">右侧浮动</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/layouts/boxed.html">
                                    <span class="site-menu-title">盒式布局</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/layouts/two-columns.html">
                                    <span class="site-menu-title">两栏式布局</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/layouts/panel-transition.html">
                                    <span class="site-menu-title">面板动画</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-cube" aria-hidden="true"></i>
                            <span class="site-menu-title">基本</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">面板</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/basic/panel/structure.html">
                                            <span class="site-menu-title">面板结构</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/basic/panel/actions.html">
                                            <span class="site-menu-title">面板操作</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/basic/panel/portlets.html">
                                            <span class="site-menu-title">面板组件</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/buttons.html">
                                    <span class="site-menu-title">按钮</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/icons.html">
                                    <span class="site-menu-title">矢量图标</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/dropdowns.html">
                                    <span class="site-menu-title">下拉菜单</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/list.html">
                                    <span class="site-menu-title">列表组</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/tooltip-popover.html">
                                    <span class="site-menu-title">气泡提示 &amp; 弹出框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/modals.html">
                                    <span class="site-menu-title">模态框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/tabs-accordions.html">
                                    <span class="site-menu-title">选项卡 &amp; 折叠面板</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/images.html">
                                    <span class="site-menu-title">图片</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/badges.html">
                                    <span class="site-menu-title">徽章</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/carousel.html">
                                    <span class="site-menu-title">轮播组件</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/typography.html">
                                    <span class="site-menu-title">排版</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/progress-bars.html">
                                    <span class="site-menu-title">进度条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/colors.html">
                                    <span class="site-menu-title">配色方案</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/utilities.html">
                                    <span class="site-menu-title">辅助类</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-cubes" aria-hidden="true"></i>
                            <span class="site-menu-title">进阶</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/tour.html">
                                    <span class="site-menu-title">新手指引</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/animation.html">
                                    <span class="site-menu-title">动画</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/lightbox.html">
                                    <span class="site-menu-title">灯箱</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/scrollbar.html">
                                    <span class="site-menu-title">滚动条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/rating.html">
                                    <span class="site-menu-title">评分</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/context-menu.html">
                                    <span class="site-menu-title">右键菜单</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/alertify.html">
                                    <span class="site-menu-title">Alertify 弹框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/masonry.html">
                                    <span class="site-menu-title">瀑布流布局</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">树形控件</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/advanced/tree/jstree.html">
                                            <span class="site-menu-title">JsTree</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/advanced/tree/treeview.html">
                                            <span class="site-menu-title">Treeview</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/toastr.html">
                                    <span class="site-menu-title">Toastr 通知</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/sortable-nestable.html">
                                    <span class="site-menu-title">拖动排序</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/bootbox-sweetalert.html">
                                    <span class="site-menu-title">弹层组件</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-plug" aria-hidden="true"></i>
                            <span class="site-menu-title">组件</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/alerts.html">
                                    <span class="site-menu-title">警告框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/ribbon.html">
                                    <span class="site-menu-title">彩带</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/pricing-tables.html">
                                    <span class="site-menu-title">价目表</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/overlay.html">
                                    <span class="site-menu-title">遮罩</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/cover.html">
                                    <span class="site-menu-title">覆盖层</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">时间轴</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/structure/timeline/simple.html">
                                            <span class="site-menu-title">简单时间轴</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/structure/timeline/icons.html">
                                            <span class="site-menu-title">图标时间轴</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/step.html">
                                    <span class="site-menu-title">步骤条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/comments.html">
                                    <span class="site-menu-title">评论</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/media.html">
                                    <span class="site-menu-title">媒体</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/chat.html">
                                    <span class="site-menu-title">聊天窗口</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/testimonials.html">
                                    <span class="site-menu-title">客户评价</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/nav.html">
                                    <span class="site-menu-title">导航</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/navbars.html">
                                    <span class="site-menu-title">导航条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/blockquotes.html">
                                    <span class="site-menu-title">引用</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/pagination.html">
                                    <span class="site-menu-title">分页</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/breadcrumbs.html">
                                    <span class="site-menu-title">包屑导航</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-address-card-o" aria-hidden="true"></i>
                            <span class="site-menu-title">卡片</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/statistics.html">
                                    <span class="site-menu-title">统计</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/data.html">
                                    <span class="site-menu-title">数据</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/blog.html">
                                    <span class="site-menu-title">博客</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/chart.html">
                                    <span class="site-menu-title">图表</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/social.html">
                                    <span class="site-menu-title">社交</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/weather.html">
                                    <span class="site-menu-title">天气</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-3" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">页面示例</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-home" aria-hidden="true"></i>
                            <span class="site-menu-title">首页示例</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/index-v1.html">
                                    <span class="site-menu-title">首页示例 01</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/index-v2.html">
                                    <span class="site-menu-title">首页示例 02</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/ecommerce.html">
                                    <span class="site-menu-title">电商网站型</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/analytics.html">
                                    <span class="site-menu-title">数据统计型</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/team.html">
                                    <span class="site-menu-title">团队协作型</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-files-o" aria-hidden="true"></i>
                            <span class="site-menu-title">常用页面</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/blank.html">
                                    <span class="site-menu-title">空白页面</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/faq.html">
                                    <span class="site-menu-title">帮助文档</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/gallery-grid.html">
                                    <span class="site-menu-title">相册</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/search-result.html">
                                    <span class="site-menu-title">搜索</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/user.html">
                                    <span class="site-menu-title">客户列表</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/email.html">
                                    <span class="site-menu-title">邮件模板</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/code-editor.html">
                                    <span class="site-menu-title">代码编辑器</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/error.html">
                                    <span class="site-menu-title">错误页面</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/errors/no-auth.html">
                                    <span class="site-menu-title">没有权限</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/errors/maintenance.html">
                                    <span class="site-menu-title">网站维护中</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/locked.html">
                                    <span class="site-menu-title">锁屏页面</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-group" aria-hidden="true"></i>
                            <span class="site-menu-title">团队协作</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/calendar.html">
                                    <span class="site-menu-title">日历</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/notebook.html">
                                    <span class="site-menu-title">笔记</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/taskboard.html">
                                    <span class="site-menu-title">任务看板</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">知识库</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/documents/articles.html">
                                            <span class="site-menu-title">列表</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/documents/categories.html">
                                            <span class="site-menu-title">分类</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/documents/article.html">
                                            <span class="site-menu-title">详情</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/forum.html">
                                    <span class="site-menu-title">论坛</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/message.html">
                                    <span class="site-menu-title">即时通讯</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/mailbox.html">
                                    <span class="site-menu-title">邮箱</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/media.html">
                                    <span class="site-menu-title">文件管理</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">项目</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/projects.html">
                                            <span class="site-menu-title">项目列表 01</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/work.html">
                                            <span class="site-menu-title">项目列表 02</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-4" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">表格示例</li>
                    <li class="site-menu-item">
                        <a href="/html/examples/tables/basic/index.html">
                            <i class="site-menu-icon fa-table" aria-hidden="true"></i>
                            <span class="site-menu-title">基本表格</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/tables/treegrid/index.html">
                            <i class="site-menu-icon fa-sort-amount-asc" aria-hidden="true"></i>
                            <span class="site-menu-title">树形表格</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-list-alt" aria-hidden="true"></i>
                            <span class="site-menu-title">DataTables</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/basic-init/zero-configuration.html">
                                    <span class="site-menu-title">基本初始化</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/advanced-init/events-live.html">
                                    <span class="site-menu-title">高级初始化</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/data-sources/dom.html">
                                    <span class="site-menu-title">数据源</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/api/add-row.html">
                                    <span class="site-menu-title">API</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/ajax/simple.html">
                                    <span class="site-menu-title">AJAX</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/server-side/simple.html">
                                    <span class="site-menu-title">服务器模式</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/plug-ins/api.html">
                                    <span class="site-menu-title">插件</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/others/fixed-header.html">
                                    <span class="site-menu-title">其他</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-list-alt" aria-hidden="true"></i>
                            <span class="site-menu-title">BootstrapTable</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/bootstrap-table/options/boolean-options.html">
                                    <span class="site-menu-title">选项</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/bootstrap-table/methods/getOptions.html">
                                    <span class="site-menu-title">方法</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/bootstrap-table/extensions/export.html">
                                    <span class="site-menu-title">扩展</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-5" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">表单相关</li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/general.html">
                            <i class="site-menu-icon fa-circle-o" aria-hidden="true"></i>
                            <span class="site-menu-title">基本表单</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/material.html">
                            <i class="site-menu-icon fa-google" aria-hidden="true"></i>
                            <span class="site-menu-title">质感风格</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-toggle-off" aria-hidden="true"></i>
                            <span class="site-menu-title">高级表单元素</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/select.html">
                                    <span class="site-menu-title">下拉选择</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/tags-input.html">
                                    <span class="site-menu-title">标签输入</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/date-time.html">
                                    <span class="site-menu-title">日期时间</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/checkbox-radio.html">
                                    <span class="site-menu-title">复选框 &amp; 单选框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/color-icon.html">
                                    <span class="site-menu-title">颜色 &amp; 图标</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/other.html">
                                    <span class="site-menu-title">其他</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/layouts.html">
                            <i class="site-menu-icon fa-indent" aria-hidden="true"></i>
                            <span class="site-menu-title">表单布局</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/wizard.html">
                            <i class="site-menu-icon fa-arrow-right" aria-hidden="true"></i>
                            <span class="site-menu-title">表单向导</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/validation.html">
                            <i class="site-menu-icon fa-check-square-o" aria-hidden="true"></i>
                            <span class="site-menu-title">表单验证</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/masks.html">
                            <i class="site-menu-icon fa-at" aria-hidden="true"></i>
                            <span class="site-menu-title">格式预设</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-list-alt" aria-hidden="true"></i>
                            <span class="site-menu-title">编辑器</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/editor/summernote.html">
                                    <span class="site-menu-title">文本编辑器</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/editor/markdown.html">
                                    <span class="site-menu-title">Markdown编辑器</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/editor/ace.html">
                                    <span class="site-menu-title">代码编辑器</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/image-cropping.html">
                            <i class="site-menu-icon fa-cut" aria-hidden="true"></i>
                            <span class="site-menu-title">图片裁剪</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/dropify.html">
                            <i class="site-menu-icon fa-cloud-upload" aria-hidden="true"></i>
                            <span class="site-menu-title">文件上传</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-6" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">统计图表</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-pie-chart" aria-hidden="true"></i>
                            <span class="site-menu-title">简单图表</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/chartjs.html">
                                    <span class="site-menu-title">Chart.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/gauges.html">
                                    <span class="site-menu-title">Gauges</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/flot.html">
                                    <span class="site-menu-title">Flot</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/peity.html">
                                    <span class="site-menu-title">Peity</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/sparkline.html">
                                    <span class="site-menu-title">Sparkline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/morris.html">
                                    <span class="site-menu-title">Morris</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/chartist.html">
                                    <span class="site-menu-title">Chartist.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/rickshaw.html">
                                    <span class="site-menu-title">Rickshaw</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/c3.html">
                                    <span class="site-menu-title">C3</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/charts/echarts.html">
                            <i class="site-menu-icon fa-area-chart" aria-hidden="true"></i>
                            <span class="site-menu-title">百度 Echarts</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-7" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">菜单演示 01</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">一级菜单</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/menu.html">
                                    <span class="site-menu-title">二级菜单 01</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/menu.html">
                                    <span class="site-menu-title">二级菜单 02</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">二级菜单 03</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/menu.html">
                                            <span class="site-menu-title">三级菜单 001</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/menu.html">
                                            <span class="site-menu-title">三级菜单 002</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/menu.html">
                                            <span class="site-menu-title">三级菜单 003</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/menu.html">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">独立菜单</span>
                        </a>
                    </li>
                    <li class="site-menu-category">菜单演示 02</li>
                    <li class="site-menu-item">
                        <a href="/html/examples/menu.html">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">独立菜单</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-8" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">系统信息</li>
                    <li class="site-menu-item">
                        <a href="/html/system/menu.html">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">菜单管理</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/organization.html">
                            <i class="site-menu-icon fa-sitemap" aria-hidden="true"></i>
                            <span class="site-menu-title">组织结构</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/role.html">
                            <i class="site-menu-icon fa-sliders" aria-hidden="true"></i>
                            <span class="site-menu-title">角色管理</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/permission.html">
                            <i class="site-menu-icon fa-user-secret" aria-hidden="true"></i>
                            <span class="site-menu-title">权限管理</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/log.html">
                            <i class="site-menu-icon fa-file-text-o" aria-hidden="true"></i>
                            <span class="site-menu-title">日志信息</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/blacklist.html">
                            <i class="site-menu-icon fa-shield" aria-hidden="true"></i>
                            <span class="site-menu-title">黑名单</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-gear" aria-hidden="true"></i>
                            <span class="site-menu-title">系统设置</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/system/settings/display.html">
                                    <span class="site-menu-title">显示设置</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/system/settings/log.html">
                                    <span class="site-menu-title">日志设置</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">我的账户</li>
                    <li class="site-menu-item">
                        <a href="/html/system/account.html">
                            <i class="site-menu-icon fa-key" aria-hidden="true"></i>
                            <span class="site-menu-title">账户信息</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<main class="site-page">
    <div class="page-container" id="admui-pageContent">
<div class="page animation-fade">
    <div class="page-header">
        <h1 class="page-title">导航条</h1>
        <div class="page-header-actions">
            <form>
                <div class="input-search input-search-dark">
                    <i class="input-search-icon wb-search" aria-hidden="true"></i>
                    <input type="text" class="form-control" name="" placeholder="搜索...">
                </div>
            </form>
        </div>
    </div>
    <div class="page-content">

        <div class="example-wrap">
            <h4 class="example-title">默认</h4>
            <p>导航条在您的应用或网站中作为导航页头的响应式基础组件。导航条在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航条也会水平展开。导航条包括了站点名称和基本的导航定义样式。 </p>
            <div class="example">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                                data-target="#example-navbar-default-collapse" data-toggle="collapse">
                                <span class="sr-only">导航切换</span>
                                <span class="hamburger-bar"></span>
                            </button>
                            <button type="button" class="navbar-toggler collapsed" data-target="#example-navbar-default-search"
                                data-toggle="collapse">
                                <span class="sr-only">菜单切换</span>
                                <i class="icon wb-search" aria-hidden="true"></i>
                            </button>
                            <a class="navbar-brand" href="javascript:;">Brand</a>
                        </div>
                        <ul class="nav navbar-toolbar hidden-float">
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:;">
                                    <i class="icon wb-grid-4" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li class="nav-item d-none d-sm-block">
                                <a class="nav-link icon icon-fullscreen" data-toggle="fullscreen" href="javascript:;"
                                    role="button">
                                    <span class="sr-only">全屏切换</span>
                                </a>
                            </li>
                            <li class="nav-item hidden-float">
                                <a class="nav-link icon wb-search" data-toggle="collapse" href="#example-navbar-default-search"
                                    role="button">
                                    <span class="sr-only">搜索切换</span>
                                </a>
                            </li>
                        </ul>
                        <div class="collapse navbar-collapse navbar-collapse-toolbar" id="example-navbar-default-collapse">
                            <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                                <li class="nav-item dropdown">
                                    <a class="nav-link navbar-avatar" data-toggle="dropdown" href="javascript:;"
                                        aria-expanded="false">
                                        <span class="avatar avatar-online">
                                            <img src="../../../../public/images/portraits/5.jpg" alt="...">
                                            <i></i>
                                        </span>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-user" aria-hidden="true"></i> 个人资料</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-payment" aria-hidden="true"></i> 订单中心</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-settings" aria-hidden="true"></i> 设置</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-power" aria-hidden="true"></i> 退出</a>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" data-toggle="dropdown" href="javascript:;" title="通知"
                                        aria-expanded="false" data-animation="slide-bottom" role="button">
                                        <i class="icon wb-bell" aria-hidden="true"></i>
                                        <span class="badge badge-pill badge-danger up">5</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                                        <div class="dropdown-menu-header">
                                            <h5>通知</h5>
                                            <span class="badge badge-round badge-danger">5</span>
                                        </div>

                                        <div class="list-group">
                                            <div data-plugin="mCustomScrollbar" data-set-height="270">
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-order bg-red-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">您有一个新订单，请及时处理</h6>
                                                            <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5
                                                                分钟前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-user bg-green-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">任务已完成</h6>
                                                            <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-settings bg-red-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">您的设置已保存</h6>
                                                            <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-calendar bg-blue-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">任务已下发</h6>
                                                            <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-chat bg-orange-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">收到一条新消息</h6>
                                                            <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="dropdown-menu-footer">
                                            <a class="dropdown-menu-footer-btn" href="javascript:;" role="button">
                                                <i class="icon wb-settings" aria-hidden="true"></i>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">
                                                所有通知
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" data-toggle="dropdown" href="javascript:;" title="消息"
                                        aria-expanded="false" data-animation="slide-bottom" role="button">
                                        <i class="icon wb-envelope" aria-hidden="true"></i>
                                        <span class="badge badge-pill badge-info up">3</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                                        <div class="dropdown-menu-header" role="presentation">
                                            <h5>消息</h5>
                                            <span class="badge badge-round badge-info">3</span>
                                        </div>

                                        <div class="list-group" role="presentation">
                                            <div data-role="container">
                                                <div data-plugin="mCustomScrollbar" data-set-height="270">
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-online">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/2.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">紫萱</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-17T20:22:05+08:00">30 分钟前
                                                                    </time>
                                                                </div>
                                                                <div class="media-detail">我喜欢你很久了</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-off">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/3.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">于恋洋</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-17T12:30:30+08:00">12 小时前
                                                                    </time>
                                                                </div>
                                                                <div class="media-detail">请求加我为好友</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-busy">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/4.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">刘慧姝</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-16T18:38:40+08:00">2 天前</time>
                                                                </div>
                                                                <div class="media-detail">发布了一条通知</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-away">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/5.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">徐宁</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-15T20:34:48+08:00">3 天前</time>
                                                                </div>
                                                                <div class="media-detail">正在埋头写代码</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="dropdown-menu-footer" role="presentation">
                                            <a class="dropdown-menu-footer-btn" href="javascript:;" role="button">
                                                <i class="icon wb-settings" aria-hidden="true"></i>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">
                                                查看所有消息
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <ul class="nav navbar-toolbar navbar-right">
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;"
                                        aria-expanded="false" role="button">更多</a>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项一</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项二</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项三</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项四</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项五</a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="collapse navbar-search-overlap" id="example-navbar-default-search">
                            <form role="search">
                                <div class="form-group">
                                    <div class="input-search">
                                        <i class="input-search-icon wb-search" aria-hidden="true"></i>
                                        <input type="text" class="form-control" name="site-search" placeholder="搜索...">
                                        <button type="button" class="input-search-close icon wb-close" data-target="#example-navbar-default-search"
                                            data-toggle="collapse" aria-label="关闭"></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">反色</h4>
            <div class="example">
                <nav class="navbar navbar-inverse" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                                data-target="#example-navbar-inverse-collapse" data-toggle="collapse">
                                <span class="sr-only">导航切换</span>
                                <span class="hamburger-bar"></span>
                            </button>
                            <button type="button" class="navbar-toggler collapsed" data-target="#example-navbar-inverse-search"
                                data-toggle="collapse">
                                <span class="sr-only">菜单切换</span>
                                <i class="icon wb-search" aria-hidden="true"></i>
                            </button>
                            <a class="navbar-brand" href="javascript:;">Brand</a>
                        </div>
                        <ul class="nav navbar-toolbar hidden-float">
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:;">
                                    <i class="icon wb-grid-4" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li class="nav-item d-none d-sm-block">
                                <a class="nav-link icon icon-fullscreen" data-toggle="fullscreen" href="javascript:;"
                                    role="button">
                                    <span class="sr-only">全屏切换</span>
                                </a>
                            </li>
                            <li class="nav-item hidden-float">
                                <a class="nav-link icon wb-search" data-toggle="collapse" href="#example-navbar-default-search"
                                    role="button">
                                    <span class="sr-only">搜索切换</span>
                                </a>
                            </li>
                        </ul>
                        <div class="collapse navbar-collapse navbar-collapse-toolbar" id="example-navbar-inverse-collapse">
                            <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                                <li class="nav-item dropdown">
                                    <a class="nav-link navbar-avatar" data-toggle="dropdown" href="javascript:;"
                                        aria-expanded="false">
                                        <span class="avatar avatar-online">
                                            <img src="../../../../public/images/portraits/5.jpg" alt="...">
                                            <i></i>
                                        </span>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-user" aria-hidden="true"></i> 个人资料</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-payment" aria-hidden="true"></i> 订单中心</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-settings" aria-hidden="true"></i> 设置</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-power" aria-hidden="true"></i> 退出</a>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" data-toggle="dropdown" href="javascript:;" title="通知"
                                        aria-expanded="false" data-animation="slide-bottom" role="button">
                                        <i class="icon wb-bell" aria-hidden="true"></i>
                                        <span class="badge badge-pill badge-danger up">5</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                                        <div class="dropdown-menu-header">
                                            <h5>通知</h5>
                                            <span class="badge badge-round badge-danger">5</span>
                                        </div>

                                        <div class="list-group">
                                            <div data-plugin="mCustomScrollbar" data-set-height="270">
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-order bg-red-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">您有一个新订单，请及时处理</h6>
                                                            <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5
                                                                分钟前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-user bg-green-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">任务已完成</h6>
                                                            <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-settings bg-red-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">您的设置已保存</h6>
                                                            <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-calendar bg-blue-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">任务已下发</h6>
                                                            <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-chat bg-orange-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">收到一条新消息</h6>
                                                            <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="dropdown-menu-footer">
                                            <a class="dropdown-menu-footer-btn" href="javascript:;" role="button">
                                                <i class="icon wb-settings" aria-hidden="true"></i>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">
                                                所有通知
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" data-toggle="dropdown" href="javascript:;" title="消息"
                                        aria-expanded="false" data-animation="slide-bottom" role="button">
                                        <i class="icon wb-envelope" aria-hidden="true"></i>
                                        <span class="badge badge-pill badge-info up">3</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                                        <div class="dropdown-menu-header" role="presentation">
                                            <h5>消息</h5>
                                            <span class="badge badge-round badge-info">3</span>
                                        </div>

                                        <div class="list-group" role="presentation">
                                            <div data-role="container">
                                                <div data-plugin="mCustomScrollbar" data-set-height="270">
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-online">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/2.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">紫萱</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-17T20:22:05+08:00">30 分钟前
                                                                    </time>
                                                                </div>
                                                                <div class="media-detail">我喜欢你很久了</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-off">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/3.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">于恋洋</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-17T12:30:30+08:00">12 小时前
                                                                    </time>
                                                                </div>
                                                                <div class="media-detail">请求加我为好友</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-busy">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/4.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">刘慧姝</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-16T18:38:40+08:00">2 天前</time>
                                                                </div>
                                                                <div class="media-detail">发布了一条通知</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-away">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/5.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">徐宁</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-15T20:34:48+08:00">3 天前</time>
                                                                </div>
                                                                <div class="media-detail">正在埋头写代码</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="dropdown-menu-footer" role="presentation">
                                            <a class="dropdown-menu-footer-btn" href="javascript:;" role="button">
                                                <i class="icon wb-settings" aria-hidden="true"></i>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">
                                                查看所有消息
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <ul class="nav navbar-toolbar navbar-right">
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;"
                                        aria-expanded="false" role="button">更多</a>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项一</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项二</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项三</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项四</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项五</a>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="collapse navbar-search-overlap" id="example-navbar-inverse-search">
                            <form role="search">
                                <div class="form-group">
                                    <div class="input-search">
                                        <i class="input-search-icon wb-search" aria-hidden="true"></i>
                                        <input type="text" class="form-control" name="site-search" placeholder="搜索...">
                                        <button type="button" class="input-search-close icon wb-close" data-target="#example-navbar-inverse-search"
                                            data-toggle="collapse" aria-label="关闭"></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">工具栏</h4>
            <div class="example">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                                data-target="#example-navbar-toolbar-collapse" data-toggle="collapse">
                                <span class="sr-only">导航切换</span>
                                <span class="hamburger-bar"></span>
                            </button>
                            <button type="button" class="navbar-toggler collapsed" data-target="#example-navbar-search-1"
                                data-toggle="collapse">
                                <span class="sr-only">菜单切换</span>
                                <i class="icon wb-search" aria-hidden="true"></i>
                            </button>
                            <a class="navbar-brand" href="javascript:;">Brand</a>
                        </div>
                        <div class="collapse navbar-search navbar-left" id="example-navbar-search-1">
                            <form class="navbar-form" role="search">
                                <div class="input-search">
                                    <input type="text" class="form-control" placeholder="搜索...">
                                    <button type="button" class="input-search-btn">
                                        <i class="icon wb-search" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="collapse navbar-collapse navbar-collapse-toolbar" id="example-navbar-toolbar-collapse">
                            <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                                <li class="nav-item dropdown">
                                    <a class="nav-link navbar-avatar" data-toggle="dropdown" href="javascript:;"
                                        aria-expanded="false">
                                        <span class="avatar avatar-online">
                                            <img src="../../../../public/images/portraits/5.jpg" alt="...">
                                            <i></i>
                                        </span>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-user" aria-hidden="true"></i> 个人资料</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-payment" aria-hidden="true"></i> 订单中心</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-settings" aria-hidden="true"></i> 设置</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">
                                            <i class="icon wb-power" aria-hidden="true"></i> 退出</a>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" data-toggle="dropdown" href="javascript:;" title="通知"
                                        aria-expanded="false" data-animation="slide-bottom" role="button">
                                        <i class="icon wb-bell" aria-hidden="true"></i>
                                        <span class="badge badge-pill badge-danger up">5</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                                        <div class="dropdown-menu-header">
                                            <h5>通知</h5>
                                            <span class="badge badge-round badge-danger">5</span>
                                        </div>

                                        <div class="list-group">
                                            <div data-plugin="mCustomScrollbar" data-set-height="270">
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-order bg-red-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">您有一个新订单，请及时处理</h6>
                                                            <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5
                                                                分钟前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-user bg-green-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">任务已完成</h6>
                                                            <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-settings bg-red-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">您的设置已保存</h6>
                                                            <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-calendar bg-blue-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">任务已下发</h6>
                                                            <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                                <a class="list-group-item" href="javascript:;" role="menuitem">
                                                    <div class="media">
                                                        <div class="pr-10">
                                                            <i class="icon wb-chat bg-orange-600 white icon-circle"
                                                                aria-hidden="true"></i>
                                                        </div>
                                                        <div class="media-body">
                                                            <h6 class="mt-0 mb-5">收到一条新消息</h6>
                                                            <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3
                                                                天前</time>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="dropdown-menu-footer">
                                            <a class="dropdown-menu-footer-btn" href="javascript:;" role="button">
                                                <i class="icon wb-settings" aria-hidden="true"></i>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">
                                                所有通知
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" data-toggle="dropdown" href="javascript:;" title="消息"
                                        aria-expanded="false" data-animation="slide-bottom" role="button">
                                        <i class="icon wb-envelope" aria-hidden="true"></i>
                                        <span class="badge badge-pill badge-info up">3</span>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                                        <div class="dropdown-menu-header" role="presentation">
                                            <h5>消息</h5>
                                            <span class="badge badge-round badge-info">3</span>
                                        </div>

                                        <div class="list-group" role="presentation">
                                            <div data-role="container">
                                                <div data-plugin="mCustomScrollbar" data-set-height="270">
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-online">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/2.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">紫萱</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-17T20:22:05+08:00">30 分钟前
                                                                    </time>
                                                                </div>
                                                                <div class="media-detail">我喜欢你很久了</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-off">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/3.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">于恋洋</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-17T12:30:30+08:00">12 小时前
                                                                    </time>
                                                                </div>
                                                                <div class="media-detail">请求加我为好友</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-busy">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/4.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">刘慧姝</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-16T18:38:40+08:00">2 天前</time>
                                                                </div>
                                                                <div class="media-detail">发布了一条通知</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                    <a class="list-group-item" href="javascript:;" role="menuitem">
                                                        <div class="media">
                                                            <div class="pr-10">
                                                                <span class="avatar avatar-sm avatar-away">
                                                                    <img src="http://cdn.admui.com/demo/pjax/1.3.0/images/portraits/5.jpg"
                                                                        alt="...">
                                                                    <i></i>
                                                                </span>
                                                            </div>
                                                            <div class="media-body">
                                                                <h6 class="mt-0 mb-5">徐宁</h6>
                                                                <div class="media-meta">
                                                                    <time datetime="2016-06-15T20:34:48+08:00">3 天前</time>
                                                                </div>
                                                                <div class="media-detail">正在埋头写代码</div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="dropdown-menu-footer" role="presentation">
                                            <a class="dropdown-menu-footer-btn" href="javascript:;" role="button">
                                                <i class="icon wb-settings" aria-hidden="true"></i>
                                            </a>
                                            <a class="dropdown-item" href="javascript:;" role="menuitem">
                                                查看所有消息
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <ul class="nav navbar-toolbar navbar-right">
                                <li class="nav-item active">
                                    <a class="nav-link" href="javascript:;">链接
                                        <span class="sr-only">(current)</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:;">链接
                                        <span class="sr-only">(current)</span>
                                    </a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;"
                                        aria-expanded="false" role="button">更多</a>
                                    <div class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项一</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项二</a>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项三</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项四</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="javascript:;" role="menuitem">菜单项五</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">Brand 图片</h4>
            <p>给 Brand 图片
                <code>&lt;img&gt;</code> 添加
                <code>.navbar-brand</code> 来实现。您可能还需要为 Brand 图片添加其他的 CSS。</p>
            <div class="example">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="javascript:;">
                                <img src="../../../../public/images/portraits/1.jpg" alt="Brand" height="20">
                            </a>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">Brand 居中</h4>
            <p>添加
                <code>.navbar-brand-center</code> 类让 Brand 在小屏幕移动设备上居中显示。</p>
            <div class="example">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand navbar-brand-center" href="javascript:;">
                                Brand
                            </a>
                            <div class="navbar-brand d-md-none"></div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">搜索</h4>
            <div class="example">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="javascript:;">Brand</a>
                        </div>
                        <div class="collapse navbar-search navbar-left" id="example-navbar-search">
                            <form class="navbar-form" role="search">
                                <div class="input-search">
                                    <input type="text" class="form-control" placeholder="搜索">
                                    <button type="button" class="input-search-btn">
                                        <i class="icon wb-search" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">覆盖式搜索</h4>
            <div class="example">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="javascript:;">Brand</a>
                        </div>
                        <ul class="nav navbar-toolbar">
                            <li class="nav-item active">
                                <a class="nav-link" href="javascript:;">链接</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="javascript:;">链接</a>
                            </li>
                            <li class="nav-item hidden-float">
                                <a class="nav-link icon wb-search" data-toggle="collapse" href="javascript:;"
                                    data-target="#example-navbar-search-overlap" role="button">
                                    <span class="sr-only">Toggle Search</span>
                                </a>
                            </li>
                        </ul>
                        <div class="collapse navbar-search-overlap" id="example-navbar-search-overlap">
                            <form role="search">
                                <div class="form-group">
                                    <div class="input-search">
                                        <i class="input-search-icon wb-search" aria-hidden="true"></i>
                                        <input type="text" class="form-control" placeholder="搜索">
                                        <button type="button" class="input-search-close icon wb-close" data-target="#example-navbar-search-overlap"
                                            data-toggle="collapse" aria-label="关闭"></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">按钮</h4>
            <p>在按钮上添加
                <code>.navbar-btn</code> 类可实现导航条上的按钮垂直居中。</p>
            <div class="example">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                                data-target="#example-navbar-collapse-3" data-toggle="collapse">
                                <span class="sr-only">导航切换</span>
                                <span class="hamburger-bar"></span>
                            </button>
                            <a class="navbar-brand" href="javascript:;">Brand</a>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse-3">
                            <button type="submit" class="btn btn-primary navbar-right navbar-btn">登录</button>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">文本</h4>
            <p>在文本外层元素上添加
                <code>.navbar-text</code> 类，通常使用
                <code>&lt;p&gt;</code> 标签。</p>
            <div class="example">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                                data-target="#example-navbar-collapse-4" data-toggle="collapse">
                                <span class="sr-only">导航切换</span>
                                <span class="hamburger-bar"></span>
                            </button>
                            <a class="navbar-brand" href="javascript:;">Brand</a>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse-4">
                            <p class="navbar-text">这里是文字</p>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">无链接</h4>
            <p>如果您希望在标准的导航组件之外添加标准链接，可使用
                <code>.navbar-link</code> 类可以让链接有正确的默认颜色和反色设置。</p>
            <div class="example">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                                data-target="#example-navbar-collapse-5" data-toggle="collapse">
                                <span class="sr-only">导航切换</span>
                                <span class="hamburger-bar"></span>
                            </button>
                            <a class="navbar-brand" href="javascript:;">Brand</a>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse-5">
                            <p class="navbar-text navbar-right">文字
                                <a class="navbar-link" href="javascript:;">链接</a>
                            </p>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">Mega 导航条</h4>
            <div class="example">
                <div class="navbar navbar-default navbar-mega">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                                data-toggle="collapse" data-target="#navbar-collapse-1">
                                <span class="sr-only">导航切换</span>
                                <span class="hamburger-bar"></span>
                            </button>
                            <a class="navbar-brand" href="javascript:;">Mega 菜单</a>
                        </div>
                        <div class="navbar-collapse collapse" id="navbar-collapse-1">
                            <ul class="nav navbar-toolbar">

                                <li class="nav-item dropdown dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">列表
                                        <b class="caret"></b>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <div class="mega-content">
                                            <div class="row">
                                                <div class="col-sm-6 col-lg-3 mega-menu">
                                                    <h5>标题</h5>
                                                    <ul class="list-icons">
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="col-sm-6 col-lg-3 mega-menu">
                                                    <h5>标题</h5>
                                                    <ul class="list-icons">
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                                            <a href="javascript:;"> 链接</a>
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                                            <a href="javascript:;"> 链接</a>
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                                            <a href="javascript:;"> 链接</a>
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                                            <a href="javascript:;"> 链接</a>
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                                            <a href="javascript:;"> 链接</a>
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                                            <a href="javascript:;"> 链接</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="col-sm-6 col-lg-3 mega-menu">
                                                    <h5>标题</h5>
                                                    <ul class="list-icons">
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="col-sm-6 col-lg-3 mega-menu">
                                                    <h5>标题</h5>
                                                    <ul class="list-icons">
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <i class="wb-chevron-right-mini" aria-hidden="true"></i>链接
                                                        </li>
                                                        <li>
                                                            <ul class="list-icons">
                                                                <li>
                                                                    <i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                                                    <a href="javascript:;"> 链接</a>
                                                                </li>
                                                                <li>
                                                                    <i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                                                    <a href="javascript:;"> 链接</a>
                                                                </li>
                                                                <li>
                                                                    <i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                                                    <a href="javascript:;"> 链接</a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li class="nav-item dropdown dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                                        折叠面板
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <div class="mega-content">
                                            <div class="panel-group" id="exampleMegaAccordion" aria-multiselectable="true"
                                                role="tablist">
                                                <div class="panel">
                                                    <div class="panel-heading" id="exampleMegaAccordionHeadingOne" role="tab">
                                                        <a class="panel-title" data-toggle="collapse" href="#exampleMegaCollapseOne"
                                                            data-parent="#exampleMegaAccordion" aria-expanded="true"
                                                            aria-controls="exampleMegaCollapseOne">折叠菜单项 #1</a>
                                                    </div>
                                                    <div class="panel-collapse collapse show" id="exampleMegaCollapseOne"
                                                        aria-labelledby="exampleMegaAccordionHeadingOne" role="tabpanel">
                                                        <div class="panel-body">
                                                            近日沃尔沃宣布将联合瑞典汽车安全公司奥托立夫(AUTOLIV)成立一个独立子公司，该公司将专攻瞄准未来车型自动驾驶技
                                                            术相关的研发。奥托立夫公司(AUTOLIV)是在瑞典设立的一家国际跨国公司，公司多年来研发汽车电子安全系统、电子控制单元，汽车方向盘系统以及夜视
                                                            和雷达传感系统，新的合作能够让新公司吸取Autoliv多年来在汽车驾驶安全配件制造方面的经验，研发未来用于沃尔沃或其它厂商的无人驾驶软件系统。
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel">
                                                    <div class="panel-heading" id="exampleMegaAccordionHeadingTwo" role="tab">
                                                        <a class="panel-title collapsed" data-toggle="collapse" href="#exampleMegaCollapseTwo"
                                                            data-parent="#exampleMegaAccordion" aria-expanded="false"
                                                            aria-controls="exampleMegaCollapseTwo">折叠菜单项 #2</a>
                                                    </div>
                                                    <div class="panel-collapse collapse" id="exampleMegaCollapseTwo"
                                                        aria-labelledby="exampleMegaAccordionHeadingTwo" role="tabpanel">
                                                        <div class="panel-body">
                                                            在试运营期间，Jio将向全印度人免费提供服务，直到今年年底。在免费期过后，其数据流量月资费也低至每月149卢比（约合15元人民币）。安巴尼上周在公司年度全体大会上对投资者说：“任何、所有能实现数字化的东西都将快速走向数字化，生活将走向数字化。”目前，只有五分之一的印度成年人口能够上网。在印度，公共WiFi热点极少。城市贫困区缺乏高速宽带所需的基础设备，更不用说乡村地区了。
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="panel">
                                                    <div class="panel-heading" id="exampleMegaAccordionHeadingThree"
                                                        role="tab">
                                                        <a class="panel-title collapsed" data-toggle="collapse" href="#exampleMegaCollapseThree"
                                                            data-parent="#exampleMegaAccordion" aria-expanded="false"
                                                            aria-controls="exampleMegaCollapseThree">折叠菜单项 #3</a>
                                                    </div>
                                                    <div class="panel-collapse collapse" id="exampleMegaCollapseThree"
                                                        aria-labelledby="exampleMegaAccordionHeadingThree" role="tabpanel">
                                                        <div class="panel-body">
                                                            车轮查违章与百度地图推出《中国车主违章地图大数据》报告，江苏高居“违章停车”榜首，在全国范围内，江苏、湖北、山东、浙江以及北京五个省市中的车主违章比例最高，其中江苏省以高达11.52%的比例遥遥领先。另外，江苏、湖北、山东三省的“马路杀手”已经超过了全国人口最多的广东省。有62.38%是不按规定行驶，26.18%超速、7.13%违章停车、2.82%无视尾号限行、1.49%不系安全带和不带头盔。
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">菜单
                                        <b class="caret"></b>
                                    </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <a class="dropdown-item" tabindex="-1" href="javascript:;"> 菜单项一</a>
                                        <a class="dropdown-item" tabindex="-1" href="javascript:;"> 菜单项二</a>
                                        <a class="dropdown-item" tabindex="-1" href="javascript:;"> 菜单项三</a>
                                        <div class="divider" role="presentation"></div>
                                        <a class="dropdown-item" tabindex="-1" href="javascript:;"> 菜单项四</a>
                                    </ul>
                                </li>

                                <li class="nav-item dropdown dropdown-fw dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">图片
                                        <b class="caret"></b>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <div class="mega-content">
                                            <div class="mega-content">
                                                <div class="row">
                                                    <div class="col-sm-6 col-md-3">
                                                        <a class="card" href="javascript:;">
                                                            <img class="img-fluid" alt="..." src="../../../../public/images/placeholder.png">
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-6 col-md-3">
                                                        <a class="card" href="javascript:;">
                                                            <img class="img-fluid" alt="..." src="../../../../public/images/placeholder.png">
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-6 col-md-3">
                                                        <a class="card" href="javascript:;">
                                                            <img class="img-fluid" alt="..." src="../../../../public/images/placeholder.png">
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-6 col-md-3">
                                                        <a class="card" href="javascript:;">
                                                            <img class="img-fluid" alt="..." src="../../../../public/images/placeholder.png">
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-6 col-md-3">
                                                        <a class="card" href="javascript:;">
                                                            <img class="img-fluid" alt="..." src="../../../../public/images/placeholder.png">
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-6 col-md-3">
                                                        <a class="card" href="javascript:;">
                                                            <img class="img-fluid" alt="..." src="../../../../public/images/placeholder.png">
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-6 col-md-3">
                                                        <a class="card" href="javascript:;">
                                                            <img class="img-fluid" alt="..." src="../../../../public/images/placeholder.png">
                                                        </a>
                                                    </div>
                                                    <div class="col-sm-6 col-md-3">
                                                        <a class="card" href="javascript:;">
                                                            <img class="img-fluid" alt="..." src="../../../../public/images/placeholder.png">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">更多组件</h4>
            <div class="example">
                <nav class="navbar navbar-default navbar-mega">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                                data-toggle="collapse" data-target="#navbar-collapse-2">
                                <span class="sr-only">导航切换</span>
                                <span class="hamburger-bar"></span>
                            </button>
                            <a class="navbar-brand" href="javascript:;">Mega 菜单</a>
                        </div>
                        <div class="navbar-collapse collapse" id="navbar-collapse-2">
                            <ul class="nav navbar-toolbar">
                                <li class="nav-item dropdown dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">媒体
                                        <b class="caret"></b>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <div class="mega-content">
                                            <ul class="media-list">
                                                <li class="media">
                                                    <div class="pr-20">
                                                        <a class="avatar avatar-lg" href="javascript:;">
                                                            <img src="../../../../public/images/portraits/2.jpg" alt="...">
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="mt-0 mb-5">嵌套媒体标题</h4>
                                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                                    </div>
                                                </li>
                                                <li class="media mt-20">
                                                    <div class="pr-20">
                                                        <a class="avatar avatar-lg" href="javascript:;">
                                                            <img src="../../../../public/images/portraits/3.jpg" alt="...">
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="mt-0 mb-5">嵌套媒体标题</h4>
                                                        这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item dropdown dropdown-fw dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">表格
                                        <b class="caret"></b>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <div class="mega-content table-responsive">
                                            <table class="table table-hover mb-0">
                                                <thead>
                                                    <tr>
                                                        <th>＃</th>
                                                        <th>待付款</th>
                                                        <th>宝宝数量</th>
                                                        <th>交易金额</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>所有交易</td>
                                                        <td>9999.00</td>
                                                        <td>999</td>
                                                        <td>99999.00</td>
                                                    </tr>
                                                    <tr>
                                                        <td>待付款</td>
                                                        <td>9999.00</td>
                                                        <td>999</td>
                                                        <td>99999.00</td>
                                                    </tr>
                                                    <tr>
                                                        <td>已发货</td>
                                                        <td>9999.00</td>
                                                        <td>999</td>
                                                        <td>99999.00</td>
                                                    </tr>
                                                    <tr>
                                                        <td>已成功</td>
                                                        <td>9999.00</td>
                                                        <td>999</td>
                                                        <td>99999.00</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item dropdown dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">卡片
                                        <b class="caret"></b>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <div class="mega-content">
                                            <div class="row">
                                                <div class="col-xl-4">
                                                    <div class="card mb-0">
                                                        <img class="card-img-top w-full" src="../../../../public/images/placeholder.png"
                                                            alt="...">
                                                        <div class="card-block mb-0 pb-0">
                                                            <h4 class="card-title">缩略图</h4>
                                                            <p class="card-text">缩略图说明文字</p>
                                                            <p class="mb-0">
                                                                <a class="btn btn-primary" href="javascript:;" role="button">按钮</a>
                                                                <a class="btn btn-default" href="javascript:;" role="button">按钮</a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-4">
                                                    <div class="card mb-0">
                                                        <img class="card-img-top w-full" src="../../../../public/images/placeholder.png"
                                                            alt="...">
                                                        <div class="card-block mb-0 pb-0">
                                                            <h4 class="card-title">缩略图</h4>
                                                            <p class="card-text">缩略图说明文字</p>
                                                            <p class="mb-0">
                                                                <a class="btn btn-primary" href="javascript:;" role="button">按钮</a>
                                                                <a class="btn btn-default" href="javascript:;" role="button">按钮</a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-4">
                                                    <div class="card mb-0">
                                                        <img class="card-img-top w-full" src="../../../../public/images/placeholder.png"
                                                            alt="...">
                                                        <div class="card-block mb-0 pb-0">
                                                            <h4 class="card-title">缩略图</h4>
                                                            <p class="card-text">缩略图说明文字</p>
                                                            <p class="mb-0">
                                                                <a class="btn btn-primary" href="javascript:;" role="button">按钮</a>
                                                                <a class="btn btn-default" href="javascript:;" role="button">按钮</a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <ul class="nav navbar-toolbar navbar-right">
                                <li class="nav-item dropdown dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">表单
                                        <b class="caret"></b>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <div class="mega-content">
                                            <form action="">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" id="inputName" placeholder="昵称">
                                                </div>
                                                <div class="form-group">
                                                    <input type="password" class="form-control" id="inputEmail"
                                                        placeholder="Email">
                                                </div>
                                                <div class="form-group">
                                                    <textarea class="form-control" placeholder="留言内容.."></textarea>
                                                </div>
                                                <div class="form-group mb-0">
                                                    <button type="submit" class="btn btn-success">发送留言</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="example-wrap">
            <h4 class="example-title">栅格</h4>
            <div class="example">
                <nav class="navbar navbar-default navbar-mega">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                                data-toggle="collapse" data-target="#navbar-collapse-grid">
                                <span class="sr-only">导航切换</span>
                                <span class="hamburger-bar"></span>
                            </button>
                            <a class="navbar-brand" href="javascript:;">Mega 菜单</a>
                        </div>
                        <div class="navbar-collapse collapse" id="navbar-collapse-grid">
                            <ul class="nav navbar-toolbar">
                                <li class="nav-item dropdown dropdown-fw dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">栅格
                                        <b class="caret"></b>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <div class="example-grid">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="example-col">.col-md-12</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="example-col">.col-md-6</div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="example-col">.col-md-6</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="example-col">.col-md-4</div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="example-col">.col-md-4</div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="example-col">.col-md-4</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="example-col">.col-md-3</div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="example-col">.col-md-3</div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="example-col">.col-md-3</div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="example-col">.col-md-3</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="example-col">.col-md-3</div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="example-col">.col-md-3</div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="example-col">.col-md-3</div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="example-col">.col-md-3</div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="example-col">.col-md-3</div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="example-col">.col-md-3</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                                <div class="col-md-1">
                                                    <div class="example-col">.col-md-1</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item dropdown dropdown-fw dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">偏移
                                        <b class="caret"></b>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <div class="example-grid">
                                            <div class="row">
                                                <div class="col-lg-4">
                                                    <div class="example-col">.col-lg-4</div>
                                                </div>
                                                <div class="col-lg-4 offset-lg-4">
                                                    <div class="example-col">.col-lg-4 .offset-lg-4</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-3 offset-lg-3">
                                                    <div class="example-col">.col-lg-3 .offset-lg-3</div>
                                                </div>
                                                <div class="col-lg-3 offset-lg-3">
                                                    <div class="example-col">.col-lg-3 .offset-lg-3</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6 offset-lg-3">
                                                    <div class="example-col">.col-lg-6 .offset-lg-3</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item dropdown dropdown-fw dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">侧边栏
                                        <b class="caret"></b>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <div class="example-grid">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="example-col">3</div>
                                                </div>
                                                <div class="col-md-9">
                                                    <div class="example-col">9</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item dropdown dropdown-fw dropdown-mega">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;">嵌套
                                        <b class="caret"></b>
                                    </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <div class="example-grid">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="example-col">12</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="example-col">12
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <div class="example-col">4</div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="example-col">4</div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="example-col">4</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>


        <div class="panel">
            <div class="panel-body container-fluid">
                <div class="row">
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4>固定到顶部</h4>
                            <p>添加
                                <code>.navbar-fixed-top</code> 类并包含
                                <code>.container</code> 或
                                <code>.container-fluid</code> 。</p>
                            <div class="example example-well h-400">
                                <img class="img-fluid center" src="../../../../public/images/navbar/fixed-to-top.png" alt="...">
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4>固定到底部</h4>
                            <p>添加
                                <code>.navbar-fixed-bottom</code> 类并包含
                                <code>.container</code> 或
                                <code>.container-fluid</code> 。 </p>
                            <div class="example example-well h-400">
                                <img class="img-fluid center" src="../../../../public/images/navbar/fixed-to-bottom.png" alt="...">
                            </div>
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <h4>滚动感应</h4>
                        <div class="example">
                            <nav class="navbar navbar-inverse mb-0" id="navbar-example" role="navigation">
                                <div class="container-fluid">
                                    <div class="navbar-header">
                                        <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                                            data-target="#example-navbar-collapse-6" data-toggle="collapse">
                                            <span class="sr-only">导航切换</span>
                                            <span class="hamburger-bar"></span>
                                        </button>
                                        <a class="navbar-brand" href="javascript:;">滚动感应</a>
                                    </div>
                                    <div class="collapse navbar-collapse" id="example-navbar-collapse-6">
                                        <ul class="nav navbar-toolbar">
                                            <li class="nav-item">
                                                <a class="nav-link active" href="#home">首页</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#link">链接</a>
                                            </li>
                                            <li class="nav-item dropdown">
                                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;"
                                                    aria-expanded="false" role="button">更多 </a>
                                                <div class="dropdown-menu" role="menu">
                                                    <a class="dropdown-item" href="#menu01">菜单项一</a>
                                                    <a class="dropdown-item" href="#menu02">菜单项二</a>
                                                    <div class="divider"></div>
                                                    <a class="dropdown-item" href="#menu03">菜单项三</a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </nav>
                            <div class="scrollspy-example" data-offset="0" data-target="#navbar-example" data-spy="scroll">
                                <h4 id="home">首页</h4>
                                <p>在北京时间 9 月 8 日凌晨召开的苹果发布会上，Niantic CEO John Hanke 登台宣布了 Pokemon Go 即将登陆 Apple Watch
                                    的消息。 </p>
                                <h4 id="link">链接</h4>
                                <p>2016 年 7 月 6 日，Pokemon Go 首先在澳大利亚和新西兰两个国家上线，结果有很多玩家跨区下载，导致官方不得不进行了锁区。后来，Pokemon Go
                                    陆续在全世界 100 多个国家和地区上线，其受欢迎程度可以用火爆来形容。</p>
                                <h4 id="menu01">菜单项一</h4>
                                <p>由于 Pokemon Go 的火爆，任天堂的股价也一度暴涨了 90 亿美元；虽然后来又回落下去，但是 Pokemon Go 的威力可见一斑。</p>
                                <h4 id="menu02">菜单项二</h4>
                                <p>8 月初，在 Pokemon Go 发布满一个月之际，应用分析平台 Sensor Tower 发布数据称，Pokemon Go 已经从玩家手中获取大约 2
                                    亿美元的净营收。
                                </p>
                                <h4 id="menu03">菜单项三</h4>
                                <p>如今上线满两个月，Pokemon Go 的下载次数已经超过了 5 亿，其下载量增长速度不可谓不快。要知道，另外一款风靡世界的游戏《愤怒的小鸟》从最初发布到达到 5
                                    亿的下载量，用了差不多两年的时间。 </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h4>颜色</h4>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div class="example">
                        <nav class="navbar navbar-default" role="navigation">
                            <div class="container-fluid">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggler hamburger hamburger-close collapsed">
                                        <span class="sr-only">导航切换</span>
                                        <span class="hamburger-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="javascript:;">Brand</a>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="example">
                        <nav class="navbar navbar-inverse bg-blue-grey-700" role="navigation">
                            <div class="container-fluid">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggler hamburger hamburger-close collapsed">
                                        <span class="sr-only">导航切换</span>
                                        <span class="hamburger-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="javascript:;">Brand</a>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="example">
                        <nav class="navbar navbar-inverse bg-blue-600" role="navigation">
                            <div class="container-fluid">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggler hamburger hamburger-close collapsed">
                                        <span class="sr-only">导航切换</span>
                                        <span class="hamburger-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="javascript:;">Brand</a>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="example">
                        <nav class="navbar navbar-inverse bg-teal-600" role="navigation">
                            <div class="container-fluid">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggler hamburger hamburger-close collapsed">
                                        <span class="sr-only">导航切换</span>
                                        <span class="hamburger-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="javascript:;">Brand</a>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
</main>

<footer class="site-footer">
    <div class="site-footer-legal">上海畅控 &copy;
        <a href="http://www.admui.com" target="_blank">admui.com</a>
    </div>
    <div class="site-footer-right">
        当前版本：v2.1.0 (更新于2019-4-11)
        <a class="ml-5" data-toggle="tooltip" title="购买或升级" href="http://www.admui.com/buy" target="_blank">
            <i class="icon fa-cloud-upload"></i>
        </a>
    </div>
</footer>
<!-- 插件 -->
<script src="../../../../public/themes/global/js/plugins/responsive-tabs.js"></script>
<script src="../../../../public/vendor/artTemplate/template-web.js"></script>
<script src="../../../../public/vendor/toastr/toastr.min.js"></script>
<script src="../../../../public/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>
<script src="../../../../public/vendor/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../../../../public/vendor/screenfull/screenfull.min.js"></script>
<script src="../../../../public/vendor/bootbox/bootbox.min.js"></script>

<!-- 消息通知 -->
<script src="../../../../public/js/notify-msg.js"></script>

<!-- Page JS -->

</body>
</html>